<template>
  <div class="w-90%" v-loading="loading" style="margin:0 40px">
    <div class="home-title">硬件购买</div>
    <el-row gutter="20">
      <el-col :span="8" v-for="item in list" :key="item.id">
        <div class="card" @click="goToDetail(item.id)">
          <div class="card-top">
            <div class="top-text-item-left">
              品牌型号: {{ item.modelName }}
            </div>
            <div class="top-text-item-right">
              现货价格: <span class="price">{{ item.spotPrice }}￥</span>
            </div>
          </div>
          <div class="divider"></div>
          <div class="card-content">
            <div class="card-text">
              <div class="text-item">
                联系人: {{ item.contactUser }}
              </div>
              <div class="text-item">
                联系电话: {{ item.contactUserMobile }}
              </div>
              <div class="text-item">
                到货价格: <span class="price">{{ item.futuresPrice }}￥</span>
              </div>
              <div class="text-item">交付地点: {{ item.goodsAddress }}</div>
            </div>
            <img
                v-if="item.infoPicUrl"
                :src="item.infoPicUrl"
                alt="信息大图"
                class="card-image"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-pagination
        class="justify-end"
        style="margin: 20px"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[15, 30, 60, 120]"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, defineProps } from "vue";
import { useRouter } from 'vue-router';
import { useLoading, usePage } from "@/hooks";
import $api from "@/api/hardware";

const props = defineProps({
  companyId: {
    type: String,
    required: true,
  },
});

const { loading, setLoading } = useLoading();
const { page, total, resetPage } = usePage(15);
const router = useRouter();

const list = ref([]);
const getList = async () => {
  setLoading(true);
  try {
    const queryParams = {
      ...page.value,
    };
    const { data, total: resTotal } = await $api.getCustomerGoodsList(queryParams);
    list.value = data;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

const goToDetail = (id) => {
  router.push(`/hardware/detail/${id}`);
};

const handlePageChange = (newPage) => {
  page.value.current = newPage;
};

watch(
    () => page.value,
    () => {
      getList();
    },
    {
      deep: true,
    }
);

onMounted(() => {
  getList();
});
</script>

<style scoped>
.home-title {
  text-align: center;
  margin: 40px;
  padding: 40px;
}

.card {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card-top {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-text-item-left,
.top-text-item-right {

}

.card-content {
  display: flex;
  align-items: center;
  padding: 16px;
  height: 160px;
  justify-content: space-between;
}

.divider {
  height: 1px;
  background-color: #dcdfe6;
}

.card-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.card-text {
  flex: 1;
}

.text-item {
  margin: 20px 0;
}

.price {

  font-weight: bold;
}
</style>
